<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            text-align: center;
        }
        .item{
            /* 为了调整大小和上下padding */
            display: inline-block;
            width: 234px;
            height: 300px;
            background-color: #fff;

            /* 这里设置padding很关键，不然图片靠顶线，在给图片设置margin很容易margin传递 */
            /* 主要是padding更适合调整父子盒子的间距，更规范 */
            padding: 25px 10px;
            
            text-align: center;
            /* 默认是content-box，所以需要设置box-sizing */
            box-sizing: border-box;

        }

        .item:hover{
            box-shadow: 0 2px 20px 5px rgba(0,0,0,.1);
        }

        .item img{
            width: 160px;
            height: 160px;
        }
        .item .title{
            margin-top: 10px;
        }
        .item .desc{
            color: #999;
            margin-top: 8px;
            /* 文本不换行 */
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 如果是文本超出，显示省略号 */
            text-overflow: ellipsis;
        }

        .item .price{
            margin-top: 20px;
            font-size: 14px;
        }
        .item .new-price{
            color: #ff6700;
        }
        .item .old-price{
            color: #999;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <!-- 虽然之前说过不能在行内元素放块级元素，但是标准不是死的 -->
    <!-- 块级/行内块级元素是可以放任何元素，这里我们事先给a标签设置为行内块了，所以可以 -->
    <!-- 但是这种写法一般是不会出现在vue和react里的，完全可以用div代替 -->
    <a href="https://www.mi.com/shop/buy/detail?product_id=18363" class="item">
        <div class="album">
            <img src="../images/xiaomi01.webp" alt="">
        </div>
        <!-- p元素和h3元素默认上下是有比较大的margin的，这里我们在reset.css已经消除了 -->
        <h3 class="title">小米平板5pro</h3>
        <p class="desc">卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式| 第二代骁龙8｜2K OLED 屏幕｜5000mAh大电量｜90W 小米澎湃有线秒充｜50W Pro 小米澎湃无线秒充</p>
        <div class="price">
            <span class="new-price">7999元起</span>
            <span class="old-price">6999元起</span>
        </div>
    </a>
</body>
</html>